<template>
  <view class="nursing-daily-container">
    <!-- 顶部搜索栏 -->
    <view class="header-bar">
      <input
        class="search-input"
        v-model="searchName"
        placeholder="输入客户姓名查询"
      />
      <button class="search-btn" @click="handleSearch">查询</button>
    </view>

    <!-- 卡片列表 -->
    <view v-for="(item, index) in cardList" :key="index" class="card">
      <view class="card-header">
        <text class="client-name">{{ item.client.name }}</text>
        <text class="level-tag">{{ item.nursingLevel.levelName }}</text>
      </view>
      <view class="card-content">
        <text>性别：{{ item.client.gender }}</text>
        <text>年龄：{{ item.client.age }}</text>
        <text>床位号：{{ item.client.bedId }}</text>
        <text>联系电话：{{ item.client.phone }}</text>
        <text>家庭联系人：{{ item.client.familyContact }}</text>
      </view>
      <view class="card-footer">
        <button
          class="view-btn"
          @click="viewMealCalendar(item.client.clientId, item.client.name)"
        >
          查看订餐详情
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "nursingDaily",
  data() {
    return {
      searchName: "",
      cardList: [],
      userId: null,

      // 分页相关
      page: 1,
      size: 5,
      hasMore: true,
      loading: false,
    };
  },
  onLoad() {
    this.userId = uni.getStorageSync("userId");
    this.resetAndLoad(false); // 初始不清空
  },
  onPullDownRefresh() {
    this.resetAndLoad(true); // ✅ 下拉时清空搜索框
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.fetchData();
    }
  },
  methods: {
    // ✅ 新增参数控制是否清空搜索框
    resetAndLoad(clearSearch) {
      if (clearSearch === true) {
        this.searchName = ""; // 仅当明确为 true 时清空输入框
      }
      this.page = 1;
      this.hasMore = true;
      this.cardList = [];
      this.fetchData();
    },
    handleSearch() {
      this.resetAndLoad(false); // ❌ 查询时不清空搜索框
    },
    fetchData() {
      if (!this.hasMore || this.loading) {
        uni.stopPullDownRefresh();
        return;
      }
      this.loading = true;
      uni.request({
        url: `http://localhost:9000/clientNursingProject/pageClientAndLevelByCaretaker`,
        method: "GET",
        data: {
          cur: this.page,
          number: this.size,
          userId: this.userId,
          name: this.searchName,
        },
        success: (res) => {
          if (res.data.status === 200 && Array.isArray(res.data.data)) {
            const newList = res.data.data || [];
            if (this.page === 1) {
              this.cardList = newList;
            } else {
              this.cardList = this.cardList.concat(newList);
            }

            if (newList.length < this.size) {
              this.hasMore = false;
            } else {
              this.page += 1;
              this.hasMore = true;
            }
          } else {
            uni.showToast({ title: "查询失败", icon: "none" });
            this.hasMore = false;
          }
        },
        fail: () => {
          uni.showToast({ title: "请求失败", icon: "none" });
          this.hasMore = false;
        },
        complete: () => {
          this.loading = false;
          uni.stopPullDownRefresh();
        },
      });
    },
    viewRecords(clientId) {
      uni.navigateTo({
        url: `/pages/nursingRecord/nursingRecordView?clientId=${clientId}`,
      });
    },
    viewMealCalendar(clientId, clientName) {
      uni.navigateTo({
        url: `/pages/mealPick/mealCalendar?clientId=${clientId}&clientName=${clientName}`,
      });
    },
  },
};
</script>

<style scoped>
.nursing-daily-container {
  padding: 20rpx;
  background-color: #fffbe6;
  min-height: 100vh;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  background-color: #fff;
  border-radius: 35rpx;
  margin-right: 20rpx;
  border: 1rpx solid #faad14;
}

.search-btn {
  background-color: #faad14;
  color: #fff;
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
  font-size: 28rpx;
  border: none;
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.client-name {
  font-weight: bold;
  color: #faad14;
  font-size: 32rpx;
}

.level-tag {
  background-color: #e6f7ff;
  color: #1890ff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.card-content text {
  display: block;
  color: #666;
  font-size: 26rpx;
  margin-bottom: 6rpx;
}

.card-footer {
  margin-top: 14rpx;
  text-align: right;
}

.view-btn {
  background-color: #18b566;
  color: white;
  padding: 10rpx 24rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  border: none;
}
</style>
